<template>
  <view class="tab_head">
    <text
      @click="barTap(index)"
      v-for="(headItem, index) in headItems"
      :key="index"
      :class="['tab_head-item', activeIndex == index ? 'active' : '']"
    >{{ headItem.title }}</text>
    <div class="tab_head-class" @click="show">知识分类</div>
    <popup-layer ref="popupRef" :direction="'left'">
      <view class="popupBox">
        <view
          :class="activeClassIndex==index?'popupText active':'popupText'"
          @click="clickItem(index,items.id)"
          v-for="(items, index) in headItem.headClassItem"
          :key="index"
        >{{ items.title }}</view>
      </view>
    </popup-layer>
  </view>
</template>

<script>
import popupLayer from "@/components/popup/popup-layer";

export default {
  components: {
    popupLayer
  },
  props: {
    activeIndex: {
      type: Number,
      default: 0
    },
    headItems: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      curIndex: 0
    };
  },
  computed: {
    headItem() {
      return this.headItems[this.activeIndex];
    },
    activeClassIndex() {
      return this.headItem.activeClassIndex;
    }
  },
  onLoad(){
    this.$refs.popupRef.close();
  },
  watch: {},
  methods: {
    barTap(activeIndex) {
      this.curIndex = activeIndex;
      console.log("head:barTap", activeIndex);
      this.$emit("updateActive", { activeIndex });
    },
    show() {
      this.$refs.popupRef.show();
    },
    clickItem(activeClassIndex, code) {
      this.$refs.popupRef.close();
      this.$emit("updateActive", { activeClassIndex });
    }
  }
};
</script>

<style lang="scss" scoped>
.c_blue {
  color: #377cfd;
}
.tab_head {
  width: 100%;
  background-color: #fff;
  position: relative;
  display: inline-block;
  font-size: 28upx;
  color: #333;
  padding: 4upx 0;
  box-shadow: 0px 4px 20px 0px rgba(153, 153, 153, 0.15);
  &-item {
    line-height: 50upx;
    width: 15%;
    margin-left: 34upx;
    display: inline-block;
    text-align: center;
    &.active {
      border-bottom: 4upx solid #377cfd;
      color: #377cfd;
    }
  }
  &-class {
    color: #377cfd;
    position: absolute;
    top: 4upx;
    right: 20upx;
    line-height: 50upx;
  }
}
.popupBox {
  padding: 88upx 36upx 0;
  text-align: center;
  max-width: 360upx;
  .popupText {
    font-size: 30upx;
    margin: 20upx 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    border-bottom: 1px dashed #eee;
    padding-bottom: 4upx;
  }
  .popupText:last-child {
    border-bottom: 0;
  }
  .active {
    color: #377cfd;
  }
}
</style>
